<template>
    <div>
        <router-view v-if="isRouterAlive" />
        <div id="navbar">
            <van-nav-bar
            title="个人中心"
            :left-text="this.left"
            :right-text="this.right"
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
        </div>
        <div class="user">
            <div class="img" ><van-image
            round
            width="100px"
            height="100px"
            :src="image"
            />
            </div>
            <div class="info" >
            <span><b>{{username}}</b></span> 
            <div class="desc" >{{desc}}</div>
            </div>
            </div>
         <van-collapse v-model="activeNames">
            <van-collapse-item title="个人信息" name="2">
                <van-cell is-link @click="editinfo">个人信息修改</van-cell>
                <van-cell is-link @click="editpwd">密码修改</van-cell>
            </van-collapse-item>
            <van-collapse-item title="我的收藏" name="3" >
                <router-view v-if="isRouterAlive" />
                <div class="shops" v-for="(item,index) in likes" :key="index"  >
                <van-card slot
                    :title="item.m_title"
                    :thumb="item.img_id"
                >
                    <div slot="tags">
                    <van-tag plain type="danger">提前预定</van-tag>
                    <van-tag plain type="danger">按时自取</van-tag>
                    </div>
                    <div slot="footer">
                    <van-button size="mini"  @click="gotoshop(item.m_title,item.describe,item.img_id)" >查看</van-button>
                    <van-button size="mini"  @click="dellike(item.m_title)" >取消收藏</van-button>
                    </div>
                </van-card>
                </div>
            </van-collapse-item>
            </van-collapse>
     <bar></bar>
    </div>
</template>
<script>
import bar from './Footer'
import { Toast } from "vant";
export default {
    data() {
        return {
            isRouterAlive:true,
            reload:this.reload,
            activeNames: ['3'],
            username:'用户',
            desc:'这家伙很懒啥的没写.....',
            image:'',
            likes:[],
            picture:[],
            left:'',
            right:'',
        }
    },

    components:{
        bar
        },
        inject:["reload"],
        mounted() {
            let username= sessionStorage.getItem('username');
            let password=sessionStorage.getItem('password');
            if(username){
                this.left="首页"
                this.right="退出"
                this.axios.get("http://www.shop.com:8080/api.php/common/getUserlogin?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&username=" +
                username +
                "&&password=" +
                password).then(res => {
                    this.image=res.data.data.u_img
                    this.username = res.data.data.username
                    this.desc=res.data.data.describe
                    this.axios.get("http://www.shop.com:8080/api.php/common/getPictureList?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6").then(res=>{
                        this.picture=res.data.data
                            for(var i=0;i<this.picture.length;i++){
                                if(this.image==this.picture[i].id){
                                this.image="http://www.shop.com:8080/upload/picture/"+this.picture[i].path
                                }
                            }
                        })
                    });
            }else{
                this.left="登录"
                this.right="注册"
                this.image="http://qatex3u8i.bkt.clouddn.com/FljHMzAmjllC2-CX7mdJbXXi0ya7"
            }
            
            this.axios.get("http://www.shop.com:8080/api.php/common/getlikeslist?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name=" +
            username ).then(res=>{
                this.data=res.data.data.picture
                this.likes=res.data.data.likes[0]
                for(var i=0;i<this.likes.length;i++)
                {
                    for(var j=0;j<this.data.length;j++){
                        if(this.likes[i].img_id==this.data[j].id){
                        this.likes[i].img_id ="http://www.shop.com:8080/upload/picture/"+this.data[j].path
                        }
                    }
                }
            })
        },
    methods: {
        onClickLeft() {
            if(this.left=="登录"){
                this.$router.push('/login')
            }else{
                this.$router.push('/')
            }   
        },
        onClickRight() {
            if(this.right=="退出"){
                Object.assign(this.$data,this.$options.data());
                sessionStorage.clear()
                this.$router.go(0)
            }else{
                this.$router.push('/register')
            }
            this.reload()
        },
        editinfo(){
            this.$router.push('/userinfo')
        },
        editpwd(){
            this.$router.push('/userpwd')
        },
        gotoshop(m_title,describe,img_id){
            this.$router.push({path:'/ShopDetail',query:{m_title:m_title,describe:describe,img_id:img_id}});
        },
        dellike(m_title){
            let username= sessionStorage.getItem('username');
            this.axios.post('http://www.shop.com:8080/api.php/Common/getLikesDel?access_token=5b7f60aca7e7f6f8c680b1b219ad3ec6&&u_name='+username+'&&m_title='+m_title)
            .then(res=>{
                Toast({
                    message: '取消成功',
                    icon: 'success'
                });
                this.$nextTick(()=>this.isRouterAlive=true)
                this.isRouterAlive=false
            })
        this.reload()
        },
    }

}
</script>
<style scoped>
.user{
display: flex;
height: 30%;
/* background: red; */
}
.user .img{
padding: 20px;
}
.user .info{
padding: 30px 0 0 10px;
}
.user .desc{
padding-top: 20px;
}

.van-nav-bar .van-icon{
color: #000000;
}
.van-nav-bar .van-nav-bar__text{
color: #000000;
}
.van-nav-bar__right i:nth-child(1) {
margin-right: 10px;
}

</style>